<template>
  <n-card :bordered="false" class="mt-4 proCard" size="small" :segmented="{ content: 'hard' }">
    <div class="formClass">
      <n-form :model="formValue" :size="size" ref="formRef" label-placement="top">
        <n-space justify="space-between">
          <n-h6 prefix="bar" type="success">车辆信息</n-h6>
          <n-space>
            <n-button v-if="type" size="small" @click="edit()">编辑</n-button>
            <n-button v-if="!type" size="small" @click="cancel()">取消</n-button>
            <n-button v-if="!type" type="success" size="small" @click="preservation()"
              >保存</n-button
            >
          </n-space>
        </n-space>
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi
            v-for="(item, index) in ItemList"
            :key="index"
            :span="item.span"
            :label="item.label"
          >
            <component
              :is="item.type"
              v-model:value="formValue[item.enName]"
              :disabled="item.disabled"
              :src="item.src"
              :size="item.size"
              :style="{ width: item.width }"
            >
              <n-checkbox v-for="(items, i) in item.options" :key="i" :value="items.value">{{
                items.label
              }}</n-checkbox>
            </component>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
  </n-card>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
  import { useMessage } from 'naive-ui';
  import { NConfigProvider, NCascader, NInput, NDatePicker, NSpace } from 'naive-ui';
import { useRoute } from "vue-router";
import { getEquipmentDetail } from "../../../api/BaseInfo";

  export default defineComponent({
    components: {
      NConfigProvider,
      NInput,
      NDatePicker,
      NSpace,
    },

    setup() {
      const formRef = ref(null);
      const message = useMessage();
      const type = ref(true);
      const formValue = ref({});
      const ItemList = ref([
        {
          label: '终端序列号',
          type: 'N-input',
          enName: 'a',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '终端序列号',
          size: 'small',
        },
        {
          label: '安装时间',
          type: 'N-input',
          enName: 'b',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '安装时间',
          size: 'small',
        },
        {
          label: '终端设备号',
          type: 'N-input',
          enName: 'c',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '终端设备号',
          size: 'small',
        },
        {
          label: '设备序列号',
          type: 'N-input',
          enName: 'd',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '设备序列号',
          size: 'small',
        },
        {
          label: '制造商',
          type: 'N-input',
          enName: 'e',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '制造商',
          size: 'small',
        },
        {
          label: '型号',
          type: 'N-input',
          enName: 'f',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '型号',
          size: 'small',
        },
        {
          label: '功能类型',
          type: 'N-checkbox-group',
          enName: 'g',
          span: 12,
          disabled: true,
          size: 'small',
          options: [
            { label: '视频功能', value: 1 },
            { label: '定位功能', value: 2 },
            { label: '音频采集', value: 3 },
          ],
        },
        {
          label: '视频通道',
          type: 'N-input',
          enName: 'h',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '视频通道',
          size: 'small',
        },
        {
          label: '设备归属',
          type: 'N-input',
          enName: 'i',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '设备归属',
          size: 'small',
        },
        {
          label: '领取人',
          type: 'N-input',
          enName: 'j',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '领取人',
          size: 'small',
        },
        {
          label: '出库时间',
          type: 'N-input',
          enName: 'k',
          span: 12,
          clearable: true,
          disabled: true,
          placeholder: '出库时间',
          size: 'small',
        },
      ]);
      //编辑
      const edit = () => {
        type.value = false;
        ItemList.value.map((res) => {
          return (res.disabled = false);
        });
      };
      //保存
      const preservation = () => {
        type.value = true;
        ItemList.value.map((res) => {
          return (res.disabled = true);
        });
      };
      //取消
      const cancel = () => {
        type.value = true;
        ItemList.value.map((res) => {
          return (res.disabled = true);
        });
      };
      const route = useRoute();
      const _id = route.params.id;
      onMounted(async () => {
        const record = await getEquipmentDetail(_id);
        console.log(record);
      });
      return {
        formRef,
        size: ref('medium'),
        type,
        formValue,
        edit,
        preservation,
        cancel,
        ItemList,
        handleValidateButtonClick(e) {
          e.preventDefault();
          formRef.value.validate((errors) => {
            if (!errors) {
              message.success('验证成功');
            } else {
              console.log(errors);
              message.error('验证失败');
            }
          });
        },
      };
    },
  });
</script>
<style lang="less" scoped>
  .formClass {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
